<template>
<!-- 团课背景图 -->
<img :src="info.background" class="bg" />
<!-- 遮罩层 -->
<div class="cover" />
<!-- 页面 -->
<ScreenAdapter ref="adapterRef">
  <div class="page">
    <!-- 顶部 -->
    <div class="header flex">
      <div style="position: relative;cursor: pointer;">
        <h3 @click="popover = !popover">{{ defaultStore.name }}</h3>
        <div class="popover" v-show="popover">
          <p v-for="item, k in storeList" :key="k" @click="toggleStore(item)" :class="[item.sign == defaultStore.sign && 'active']">
            {{ item.name }}
          </p>
        </div>
      </div>
      <h2>运动风险评估系统</h2>
      <p>{{ currentTime }}</p>
    </div>
    <!-- 内容 -->
    <div class="content">
      <div class="left">
        <!-- 左侧内容 -->
        <div class="flex">
          <img src="@/assets/monitor/scan.png" width="19px" />设备扫码
        </div>
        <div class="code">
          <img :src="info.qrcode" width="100%" />
        </div>
        <!-- <div v-html="info.notes" /> -->
        <div>
          <p style="font-size: 24px;margin-bottom: 18px;">注意事项：</p ><div style="font-size: 15px;word-break: break-all;"><p style="margin-bottom: 5px;">当出现如下情况请立刻终止评估：</p ><p style="margin-bottom: 5px;">1.出现心绞痛或心绞痛样症状；</p ><p style="margin-bottom: 5px;">2.运动负荷增加时SBP下降>10mmHg，或SBP低于基线血压；</p ><p style="margin-bottom: 5px;">3.BP过度升高: 收缩压>250mmHg和或舒张压>115mmHg；</p ><p style="margin-bottom: 5px;">4.呼吸困难、哮鸣音、下肢痉挛或跛行;</p ><p style="margin-bottom: 5px;">5.低灌注体征:轻度头疼、意识不清、共济失调、脸色苍白、发绀、恶心或皮肤湿冷;</p ><p style="margin-bottom: 5px;">6.Hr不随着运动强度增加而增加;</p ><p style="margin-bottom: 5px;">7.触诊或听诊发现心律显著改变；</p ><p style="margin-bottom: 5px;">8.受试者要求停止;</p ><p style="margin-bottom: 5px;">9.受试者口头或身体表现出极度疲劳;</p ><p>10.测试设备故障。</p ></div>
        </div>
      </div>
      <!-- 中间内容 -->
      <div class="center">
        <div class="rate">
          <img src="@/assets/monitor/circle.png" height="390px" />
          <div>
            <img :src="require(`@/assets/monitor/${info.bluetoothStatus ? 'icon_rate' : 'icon_rate_g'}.png`)" height="38px" />
            <div>{{ heartRate || 0 }}</div>
            <img :src="require(`@/assets/monitor/${info.ellBluetoothStatus  ? 'bluetooth_b' : 'bluetooth'}.png`)" height="26px" />
          </div>
        </div>
        <div class="detection flex">
          <div>
            <div>
              <img src="@/assets/monitor/resistance.png" height="21px" />阻力检测
            </div>
            <div class="ring-clip">
              <RingProgress :color="['#FFFFFF', '#FF8D1A']" idName="yellow" :status="heartlung.status && heartlung.resistanceClass" />
              <p>{{ heartlung.resistanceClass || 0 }}</p>
            </div>
          </div>
          <div>
            <div>
              <img src="@/assets/monitor/power.png" height="20px" />功率检测
            </div>
            <div class="ring-clip">
              <RingProgress :color="['#52E2FF', '#35ADE6']" idName="blue" :status="heartlung.status && heartlung.power" />
              <p>{{ heartlung.power || 0 }}</p>
            </div>
          </div>
          <div>
            <div>
              <img src="@/assets/monitor/speed.png" height="24px" style="vertical-align: middle;" />转速检测
            </div>
            <div class="ring-clip">
              <RingProgress :color="['#52E2FF', '#AC33C1']" idName="purple" :status="heartlung.status && heartlung.cadence" />
              <p>{{ heartlung.cadence || 0 }}</p>
            </div>
          </div>
        </div>
        <!-- 阶段进度条 -->
        <div class="flex" style="gap: 10px;">
          <img src="@/assets/monitor/arrow.png" width="40px" style="transform: rotate(180deg);" />
          <div class="level">
            <div v-for="item, key in info.stageHeartRateRanges" :key="key"> 
              <div :id="'animate'+key" v-if="key <= info.currentStage" v-bind:style="{
                background: `linear-gradient(90deg,
                ${key == info.currentStage && isWarn ? '#adadad' : item.color[0]} 0%,
                ${key == info.currentStage && isWarn ? '#adadad' : item.color[1] || item.color[0]} 100%)`
              }" />
              <span>{{ item.interval }}</span>
            </div>
          </div>
          <img src="@/assets/monitor/arrow.png" width="40px" />
        </div>
        <!-- 开始、结束按钮 close-->
        <div
          :class="['btn', info.deviceStatus ? info.testStarted && 'close' : 'disconnect']"
          @mousedown="handleMouseDown"
          @mouseup="handleMouseUp"
          @click="operate(info.testStarted ? 'stop' : 'confirm', true)"
        >
          <span v-if="info.testStarted && info.seconds">{{ info.seconds }}</span>
          <template v-else>
            <img src="@/assets/monitor/close.png" width="19px" />
            {{ info.testStarted ? '结束' : '开始' }}
          </template>
        </div>
      </div>
      <!-- 右侧内容 -->
      <div class="right">
        <h3>血压手动测量</h3>
        <!-- 血压值 -->
        <div class="flex initial">
          <div>
            <span>运动前</span>
            <b>{{ info.startBloodPressure }}</b>
          </div>
          <p :class="['btn', info.bloodPressureTestStatus ? info.bloodPressureTestStatus == 2 && 'close' : 'disconnect']" @click="bloodPressure">
            <img src="@/assets/monitor/close.png" width="26px" />
          </p>
          <div>
            <b>{{ info.endBloodPressure }}</b>
            <span>运动后</span>
          </div>
        </div>
        <h3 style="margin-bottom: 20px;">数据记录</h3>
        <!-- 测试记录 -->
        <div class="bloodPressure flex" v-for="item, k in info.testData" :key="k">
          <div class="number" :style="`${!item.status && 'background: #adadad'}`">
            {{ item.stage }}
          </div>
          <div>
            <b>SBP/DBP</b>
            <p>{{ item.bloodPressure }}</p>
          </div>
          <div class="power switch flex">
            <label>功率</label>
            <div>{{ item.power || '--/--' }}</div>
          </div>
          <div class="switch flex" style="margin: 0 45px;">
            <label>摄氧量</label>
            <div>{{ item.oxygenUptake || '--/--' }}</div>
          </div>
          <img :src="require(`@/assets/monitor/${statusIcon[item.status]}`)" width="40px" />
        </div>
        <!-- 查看报告 -->
        <div class="report" @click="() => { $refs.resultRef.show() }">
          <img src="@/assets/monitor/report.png" width="21px" />
          <b>查看报告</b>
        </div>
        <p class="unit">
          <b>单位:血压(mmHg)</b><b>功率(w)</b><b>摄氧量(ml/kg/min)</b><b>心率(bpm)</b><b>转速(rpm)</b>
        </p>
      </div>
    </div>
  </div>
</ScreenAdapter>
<!-- 背景音乐 -->
<audio controls="controls" hidden :src="audioSrc" ref="audio" />
<result-dialog :testSign="testSign" :userSign="userSign" :url="info.reportUrl" ref="resultRef" />
</template>
  
<script>
import ScreenAdapter from '../../components/ScreenAdapter';
import RingProgress from '../../components/RingProgress';
import ResultDialog from '../../components/ResultDialog';
import { getInfo, startTest, endTest, stopTest, bloodTest, getStoreList } from '@/api';
import { ElMessageBox, ElMessage } from 'element-plus'
export default {
  name: "HeartRateMonitor",
  components: { ScreenAdapter, RingProgress, ResultDialog },
  data() {
    return {
      currentTime: '',
      time: null,
      heartlung: {},
      info: {},
      ws: null,
      heartbeatTimer: null,
      reconnectTimer: null,
      reconnectAttempts: 0,
      maxReconnectAttempts: 5,
      isWarn: false,
      statusIcon: ['check_g.png', 'progress.gif', 'check.png'],
      heartRate: 0,
      storeList: [],
      defaultStore: {},
      popover: false,
      audioSrc: require('../assets/audio/prepare.mp3'),
      timeout: null,
      msgScale: 1,
      countDownTimer: null,
      testSign: localStorage.getItem('testSign') || '',
      userSign: localStorage.getItem('userSign') || ''
    }
  },
  created() {
    this.getStore()
    this.updateTime()
    this.initWebSocket()
    this.time = setInterval(this.updateTime, 1000)
  },
  watch: {
    defaultStore(val) {
      localStorage.setItem('defaultStore', JSON.stringify(val))
      this.getBase()
    }
  },
  beforeUnmount() {
    clearInterval(this.time)
    this.closeWebSocket();
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.audio.play()
      const zoom = this.$refs.adapterRef.style.zoom
      this.msgScale = zoom < 1 ? 1 : zoom
    })
  },
  methods: {
    // 获取页面信息
    async getBase() {
      await getInfo({storeSign: this.defaultStore.sign}).then(res => {
        // 处理二维码数据
        if(!res.qrcode.includes("data:image")) {
          res.qrcode = `data:image/png;base64,${res.qrcode}`
        }
        this.info = res
      })
      // 浏览器刷新继续倒计时
      const countdown = sessionStorage.getItem('countdown')
      if(countdown) {
        const {start, seconds} = JSON.parse(countdown)
        const diffTime = seconds - parseInt((+new Date() - start) / 1000)
        diffTime > 0 && this.handleCount(seconds, diffTime)
      }
    },
    // 切换门店
    toggleStore(item) {
      sessionStorage.removeItem('countdown')
      this.defaultStore = item
      this.popover = false
    },
    // 获取门店列表
    getStore() {
      const location = JSON.parse(localStorage.getItem('geolocation'))
      getStoreList(location).then(res => {
        this.storeList = res
        const _default = JSON.parse(localStorage.getItem('defaultStore'))
        let store = null
        if(_default) {
          store = res.find(v => v.sign == _default.sign)
        }
        this.defaultStore = store || res[0] || {}
      })
    },
    // 血压开始测试
    bloodPressure() {
      if(!this.info.bloodPressureTestStatus) {
        ElMessage({
          message: '心电仪连接异常，请检查设备电源和连接线！',
          customClass: 'my-custom',
          type: 'error'
        })
        return
      }
      if(this.info.bloodPressureTestStatus == 2) {
        ElMessage({
          message: '测试中.....',
          customClass: 'my-custom',
          type: 'warning'
        })
        return
      }
      bloodTest({deviceId: this.info.deviceId})
    },
    // 结束、开始、终止测试
    operate(type, isRefresh = false, force = 1) {
      if(!this.info.deviceStatus) {
        ElMessage({
          message: '请先扫码连接设备！',
          customClass: 'my-custom',
          type: 'error'
        })
        return
      }
      const params = {deviceId: this.info.deviceId}
      if(type == 'cancel') {
        endTest(params).then(() => {
          if(!isRefresh) return
          const dom = document.getElementById('animate' + this.info.currentStage)
          dom.style.transform = ''
          dom.style.transition = ''
          dom.style.left = ''
          this.info.currentStage = 4
          this.info.seconds = 0
        })
      } else if (type == 'confirm') {
        startTest(params).then((res) => {
          this.testSign = res.testSign
          localStorage.setItem('testSign', res.testSign)
          if(!isRefresh) return
          this.getBase()
        })
      } else {
        params.force = force
        stopTest(params).then(() => this.getBase())
      }
    },
    // 测试过程中，长按3S结束测试
    handleMouseDown() {
      if(!this.info.deviceStatus) return
      this.timeout = setTimeout(() => {
        ElMessageBox.alert('请确定是否结束测试!', '提示', {
          showClose: false,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          showCancelButton: true,
          customStyle: {scale: this.msgScale},
          callback: (res) => {
            if(res == 'confirm') {
              const type = this.info.currentStage == -1 || this.info.currentStage == 99 ? 'stop' : 'cancel'
              this.operate(type, true, 2)
            }
          }
        })
      }, 3000)
    },
    // 取消长按
    handleMouseUp() {
      this.timeout && clearTimeout(this.timeout)
    },
    // 提示语播放
    playMusic(name) {
      this.$refs.audio.pause()
      this.$refs.audio.src = require('../assets/audio/'+ name +'.mp3')
      this.$refs.audio.play()
    },
    // 获取实时时间
    updateTime() {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      const seconds = String(now.getSeconds()).padStart(2, "0");
      this.currentTime = `${hours}:${minutes}:${seconds}`;
    },
    // 处理接收到的数据
    handlData(res) {
      const {data, event} = res
      if(event == 'connectFail') {
        this.info.deviceStatus = 0
      } else if (event == 'connectSuccess') {
        this.getBase()
        this.userSign = data.userSign
        localStorage.setItem('userSign', data.userSign)
      } else if (event == 'btConnectFail') {
        this.heartRate = 0
        this.info.bluetoothStatus = 0
      } else if (event == 'btConnectSuccess') {
        this.heartRate = data.heartRate || 0
        this.info.bluetoothStatus = 1
      } else if (event == 'powerBtConnectFail') {
        this.info.ellBluetoothStatus = 0
      } else if (event == 'heartLung') {
        this.info.ellBluetoothStatus = 1
        this.heartlung = data
      } else if (event == 'powerStart') {
        this.playMusic(`stage${data.stage}`)
        if(data.stage) this.info.testData[data.stage - 1].status = 1
      } else if (event == 'powerEnd') {
        this.playMusic(`stage${data.stage}_end`)
        ElMessageBox.close()
        if(data.stage) this.info.testData[data.stage - 1].status = 2
      } else if (event == 'powerStartReady') {
        ElMessageBox.close()
        this.stageCountDown(data)
      } else if (event == 'oxygenUptakeResult') {
        this.info.testData[data.stage - 1].power = data.power
        this.info.testData[data.stage - 1].oxygenUptake = data.oxygenUptake
      } else if (event == 'maxOxygenUptakeResult') {
        data.stage == 4 ? this.endMessageBox(data) : this.nextMessageBox(data.stage)
      } else if (event == 'againEvaluateTest') {
        this.playMusic('again')
        this.againMessageBox()
      } else if (event == 'bloodPressure') {
        this.handleBloodPressure(data)
      } else if (event == 'heartRateLowWarn' || event == 'heartRateHighWarn') {
        this.playMusic('not_standard')
        ElMessage.closeAll()
        this.isWarn = true
        ElMessage({
          message: data.msg,
          customClass: `my-custom ${event == 'heartRateLowWarn' ? 'lowTip' : 'highTip'}`,
          type: 'warning',
          onClose: () => this.isWarn = false
        })
      } else if (event == 'BloodPressureStatus') {
        this.info.bloodPressureTestStatus = data.status
      }
    },
    // 每个阶段开始处理powerStartReady
    stageCountDown(data) {
      const { seconds, stage } = data
      if(seconds == 0) return
      sessionStorage.setItem('countdown', JSON.stringify({
        seconds,
        start: +new Date()
      }));
      this.info.currentStage = stage
      this.$nextTick(() => this.handleCount(seconds, seconds))
    },
    // 处理倒计时,参数（总时间、动画时间）
    handleCount(seconds, animate) {
      // 进度条动画
      const dom = document.getElementById('animate' + this.info.currentStage)
      const percent = Math.round(animate / seconds * 100)
      dom.style.left = `-${percent}%`
      setTimeout(() => {
        dom.style.transition = `transform ${animate}s linear`
        dom.style.transform = `translateX(${percent}%)`
      }, 20)
      dom.addEventListener('transitionend', () => {
        dom.style.transform = ''
        dom.style.transition = ''
        dom.style.left = ''
      })
      // 倒计时
      this.info.seconds = animate
      this.countDownTimer && clearInterval(this.countDownTimer)
      this.countDownTimer = setInterval(() => {
        if (this.info.seconds < 1) {
          this.countDownTimer && clearInterval(this.countDownTimer)
          this.countDownTimer = null
          sessionStorage.removeItem('countdown')
        } else {
          this.info.seconds--
        }
      }, 1000)
    },
    // 处理获取到的血压值
    handleBloodPressure(data) {
      const bloodPressure = data.systolicPressure + '/' + data.diastolicPressure
      if(data.stage == 0) {
        this.info.startBloodPressure = bloodPressure
      } else if (data.stage == 99) {
        this.info.endBloodPressure = bloodPressure
      } else {
        this.info.testData[data.stage - 1].bloodPressure = bloodPressure
      }
    },
    // 重新评估弹窗
    againMessageBox() {
      ElMessageBox.close()
      ElMessageBox.alert('您的平均心率不达标，需要重新测试!', '提示', {
        showClose: false,
        cancelButtonText: '结束测试',
        confirmButtonText: '继续测试',
        showCancelButton: true,
        customStyle: {scale: this.msgScale},
        callback: (res) => this.operate(res)
      })
    },
    // 结束测试弹窗
    endMessageBox(data) {
      const content = '测试结束，请等待6分钟后测试安静血压，在查看报告！'
      ElMessageBox.alert(content, '测试结束提示', {
        showClose: false,
        confirmButtonText: '已完成',
        showCancelButton: false,
        customStyle: {scale: this.msgScale},
        callback: () => this.operate('cancel')
      })
    },
    // 是否继续下一阶段弹窗（15s倒计时自动开始)
    nextMessageBox(stage) {
      let countdown = 15, messageBoxTimer;
      const content = `<p style="font-size: 18px;">第${stage}步测试结束啦，您的自我感受为？</p>
      <p style="padding: 15px 0;color: red;">(<span class="timer">15</span>秒后自动开始下一阶段)<p>
      ${stage == 2 ? '注意：2个阶段强度较低，测试值误差会较大!' : ''}`
      ElMessageBox.alert(content, '提示', {
        showClose: false,
        confirmButtonText: '还不觉得累，继续下一阶段！',
        cancelButtonText: '比较尽力了，结束测试吧！',
        customStyle: {maxWidth: 'fit-content', scale: this.msgScale},
        showCancelButton: true,
        dangerouslyUseHTMLString: true,
        callback: (res) => {
          clearInterval(messageBoxTimer)
          this.operate(res)
        }
      })
      messageBoxTimer = setInterval(() => {
        if (countdown <= 1) {
          messageBoxTimer && clearInterval(messageBoxTimer)
          countdown = 15
          this.operate('confirm')
          ElMessageBox.close()
          return
        }
        countdown--
        const domeInfo = document.querySelector('.timer')
        domeInfo.textContent = countdown
      }, 1000)
    },
    // WebSocket连接
    initWebSocket() {
      try {
        this.ws = new WebSocket("wss://saas.hansifit.com/JbvZhE?");
        this.ws.onopen = () => {
          console.log("WebSocket连接已建立");
          this.reconnectAttempts = 0;
          this.startHeartbeat();
        };

        this.ws.onmessage = (event) => {
          const data = JSON.parse(event.data);
          data.event != "pong" && this.handlData(data)
        };

        this.ws.onclose = () => {
          console.log("WebSocket连接已关闭");
          this.stopHeartbeat();
          this.reconnect();
        };

        this.ws.onerror = (error) => {
          console.error("WebSocket错误:", error);
        };
      } catch (error) {
        console.error("WebSocket初始化错误:", error);
        this.reconnect();
      }
    },
    // 每1秒发送一次心跳
    startHeartbeat() {
      this.heartbeatTimer = setInterval(() => {
        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
          const heartbeat = {
            data: {},
            event: "ping",
            sign: this.info.deviceId,
          };
          this.ws.send(JSON.stringify(heartbeat));
        }
      }, 1000);
    },
    // 关闭连接
    closeWebSocket() {
      this.stopHeartbeat();
      if (this.reconnectTimer) {
        clearTimeout(this.reconnectTimer);
      }
      if (this.ws) {
        this.ws.close();
      }
    },
    // 关闭心跳
    stopHeartbeat() {
      if (this.heartbeatTimer) {
        clearInterval(this.heartbeatTimer);
        this.heartbeatTimer = null;
      }
    },
    // 重新连接
    reconnect() {
      if (this.reconnectAttempts < this.maxReconnectAttempts) {
        this.reconnectAttempts++;
        console.log( `尝试重新连接 (${this.reconnectAttempts}/${this.maxReconnectAttempts})`);
        this.reconnectTimer = setTimeout(() => {
          this.initWebSocket();
        }, 5000); // 5秒后重试
      } else {
        console.error("达到最大重连次数，停止重连");
      }
    }
  }
};
</script>
  
<style scoped lang="scss">
.bg, .cover {
  width: 100%;
  height: 100%;
  position: absolute;
}
.cover {
  background: rgba(3, 3, 3, 0.8);
}
.page {
  padding: 0 20px;
  color: #fff;
}
h3 {
  font-size: 30px;
  letter-spacing: 7px;
}
.popover {
  position: absolute;
  background: #fff;
  padding: 6px 0;
  border-radius: 4px;
  min-width: 100%;
  top: calc(100% + 15px);
  color: var(--el-text-color-regular);
  font-size: 18px;
  p {
    padding: 5px 20px;
    &.active, &:hover {
      background-color: var(--el-fill-color-light);
    }
  }
  &::after {
    content: "";
    position: absolute;
    top: -9px;
    left: calc(50% - 10px);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;
  }
}
.header {
  height: 124px;
  position: relative;
  font-size: 36px;
  h2 {
    font-size: 45px;
    position: absolute;
    letter-spacing: 10px;
    left: 0;
    right: 0;
    margin: auto;
    width: fit-content;
  }
}
.content {
  display: flex;
  gap: 20px;
}
.left, .center, .right {
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.left {
  width: 163px;
  padding: 18px;
  background-image: url('@/assets/monitor/left.png');
  .code {
    padding: 6px;
    background: #fff;
    border-radius: 10px;
    font-size: 0;
    margin-bottom: 20px;
  }
  .flex {
    margin: 15px 0 20px 0;
    font-size: 24px;
  }
}
.center {
  width: 838px;
  padding: 0 20px;
  background-image: url('@/assets/monitor/centerTop.png');
  > .btn {
    width: 285px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 44px auto 0 auto;
    gap: 5px;
    span {
      font-size: 32px;
      display: inline-block;
      width: 100%;
      line-height: 80px;
    }
  }
}
.right {
  flex: 1;
  padding: 30px 20px 0 20px;
  height: 915px;
  background-image: url('@/assets/monitor/centerTop.png');
  h3 {
    text-align: center;
  }
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
// 心率
.rate {
  position: relative;
  font-size: 0;
  width: fit-content;
  padding: 20px 0 35px 0;
  margin: auto;
  > div {
    position: absolute;
    width: 100%;
    top: 95px;
    height: fit-content;
    text-align: center;
    div {
      font-size: 130px;
      margin: 5px 0;
    }
  }
}
// 检测
.detection {
  font-size: 24px;
  padding: 0px 70px 40px 80px;
  img {
    margin-right: 10px;
  }
 .ring-clip {
  margin-top: 20px;
  position: relative;
  height: 130px;
  width: 130px;
  margin: 20px auto 0 auto;
  p {
    position: absolute;
    text-align: center;
    width: 100%;
    top: 0;
    bottom: 0;
    font-size: 40px;
    height: fit-content;
    margin: auto;
  }
 }
}
// 阶段进度条
.level {
  flex: 1;
  border-radius: 100px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.46) 0%, rgba(204, 204, 204, 0.5) 100%);
  border: 2px solid #36ABE7;
  box-shadow: 0 2px 8px 0 rgba(255, 255, 255, 0.6) inset;
  padding: 8px;
  display: flex;
  gap: 3px;
  text-align: center;
  span {
    position: relative;
    z-index: 10;
    line-height: 64px;
    font-size: 24px;
    font-weight: bolder;
  }
  > div {
    width: 20%;
    overflow: hidden;
    position: relative;
    div {
      position: absolute;
      height: 100%;
      top: 0;
      width: 100%;
      box-shadow: -6px 7px 7px 0 rgba(255, 255, 255, 0.6) inset;
    }
    &:first-child {
      border-radius: 100px 0px 0px 100px;
    }
    &:last-child {
      border-radius: 0px 100px 100px 0;
    }
  }
}
// 数据记录
.bloodPressure {
  height: 90px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 20px;
  padding: 0 40px 0 25px;
  background: url('@/assets/monitor/list.png') 0 -5px no-repeat;
  background-size: 100% calc(100% + 15px);
  justify-content: start;
  .number {
    width: 40px;
    margin-right: 50px;
    border-radius: 50%;
    line-height: 40px;
    background: linear-gradient(90deg, #59B2FF 0%, #344199 100%);
  }
  b {
    font-size: 16px;
  }
}
.switch {
  width: 182px;
  line-height: 50px;
  background: linear-gradient(90deg, rgba(89, 178, 255, .6) 0%, rgba(52, 65, 153, .6) 100%);
  border-radius: 100px;
  padding-left: 18px;
  div {
    width: 97px;
    border-radius: 100px;
    background: rgba(179, 207, 232, 0.58);
    border: 1px solid #00ccff;
    box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
    font-weight: bold;
  }
}
.power {
  margin-left: auto;
  background: linear-gradient(90deg, rgba(235, 172, 26, .6) 0%, rgba(255, 68, 0, .6) 100%);
  div {
    background: rgba(255, 243, 189, 0.58);
    border: 1px solid #ffbf40;
  }
}
.bloodPressure p {
  margin-top: 5px;
  background: linear-gradient(0deg, #2980E3 0%, #fff 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
// 血压值
.initial {
  padding: 55px 40px;
  .btn {
    width: 123px;
    line-height: 76px;
    margin-left: 10px;
  }
  div {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 254px;
    position: relative;
    padding: 0 15px;
    font-weight: bold;
    &:first-child {
      background-image: url('@/assets/monitor/before_bg.png');
    }
    &:last-child {
      background-image: url('@/assets/monitor/after_bg.png');
      text-align: right;
    }
    span {
      font-size: 18px;
      color: #6d95bd;
      letter-spacing: 2px;
    }
    b {
      font-size: 24px;
      padding: 0 30px;
      line-height: 76px;
    }
  }
}
// 关闭按钮
.btn {
  background: linear-gradient(90deg, #59B2FF 0%, #344199 100%);
  box-shadow: inset 0px 2px 13px  rgba(255, 255, 255, 0.88);
  border-radius: 100px;
  font-size: 20px;
  text-align: center;
  cursor: pointer;
  &.close {
    background: linear-gradient(90deg, #E37749 0%, #B6140D 100%);
  }
  &.disconnect {
    background: #ADADAD;
  }
  img {
    vertical-align: text-bottom;
  }
}
// 查看报告
.report {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  gap: 12px;
  letter-spacing: 4px;
  margin: 34px auto;
  width: fit-content;
  cursor: pointer;
}
.unit {
  text-align: center;
  b {
    padding: 0 15px;
  }
}
</style>
<style lang="scss">
// 提示语句
.lowTip, .highTip {
  .el-message-icon--warning,  .el-message__content{
    color: #fff !important;
  }
}
.lowTip {
  background: #2196f3 !important;
}
.highTip {
  background: #bf2718 !important;
}
.my-custom, .my-custom .el-message__content {
  font-size: 30px;
}
</style>

  